<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兑换服务</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
    .input{
      padding:10px;
      outline: none;
      background:#ffffff;
      border-radius:5px;
      width: 92%
    }
    .myget{
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
    }
    .exchange_action{
      text-align: center;
      padding: 10px;
      color: #ffffff;
      background: #00477A;
      border-radius:5px;
      margin-top: 5px
    }
    </style>

</head>
<body style="height:100%;background-color:#ffffff">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">兑换服务</span>
</div>
<div id="app" class="container"  style="padding-top:60px;" v-cloak>

  <!-- <div class="exchange_content" style="background: #E3EDFF;" v-myclick="[2,changestate]">
    <div class="exchange_title"><img v-src="'../../image/3_swang2.png'"><span>使用声望兑换</span></div>
    <div v-show="exchange_type==2">
      <div class="exchange_rule"><div>兑换比例:1声望={{lists.renown.renown_scale}}券</div><div>我的声望:{{lists.renown.renown}}</div><div style="clear:both"></div></div>
      <div  style="margin-top:15px">
      <input class="input" type="number" v-model="renown_count" placeholder="请输入声望数量">
      </div>
      <div class="myget">您将获得{{renown_coupon}}券</div>
      <div class="exchange_action" v-myclick="[2,exchange]">立即兑换</div>
    </div>
  </div> -->
  <div class="exchange_content" style="background: #E3FFEF;" v-myclick="[3,changestate]">
    <div class="exchange_title"><img v-src="'../../image/3_milk.png'"><span>使用原产奶兑换</span></div>
    <div v-show="exchange_type==3">
      <div class="exchange_rule"><div>兑换比例:1原产奶={{lists.product_milk.product_milk_scale}}券</div><div>我的原产奶:{{lists.product_milk.product_milk}}</div><div style="clear:both"></div></div>
      <div  style="margin-top:15px">
      <input class="input" type="number" v-model="milk_count" placeholder="请输入原产奶数量">
      </div>
      <div class="myget">您将获得{{milk_coupon}}券</div>
      <div class="exchange_action" v-myclick="[3,exchange]">立即兑换</div>
    </div>
  </div>
  <div class="exchange_content" style="background: #FFEAE9;" v-myclick="[1,changestate]">
    <div class="exchange_title"><img v-src="'../../image/3_jinbi2.png'"><span>使用金币兑换</span></div>
    <div v-show="exchange_type==1">
      <div class="exchange_rule"><div>兑换比例:1金币={{lists.gold.gold_scale}}券</div><div>我的金币:{{lists.gold.gold}}</div><div style="clear:both"></div></div>
      <div  style="margin-top:15px">
      <input class="input" type="number" v-model="coins_count" placeholder="请输入金币数量">
      </div>
      <div class="myget">您将获得{{coin_coupon}}券</div>
      <div class="exchange_action" v-myclick="[1,exchange]">立即兑换</div>
    </div>
  </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>

<script>
    var vm;
    var user;
    var lists;
    var coins_count;
    var renown_count;
    var milk_count;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id'),
        };
        var callback = function (ret) {
            lists = ret.content;
            initApp();
            // api.parseTapmode();
        };
        pinet.post(URL.getVoucherScale, data, callback);
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
              exchange_type:3,
              lists:lists,
              coins_count:coins_count,
              renown_count:renown_count,
              milk_count:milk_count,
              coin_coupon:0,
              renown_coupon:0,
              milk_coupon:0
            },
            watch:{
              coins_count: function (newVaL) {
                  this.coin_coupon = newVaL*this.lists.gold.gold_scale;
              },
              renown_count: function (newVaL) {
                this.renown_coupon = newVaL*this.lists.renown.renown_scale;

              },
              milk_count: function (newVaL) {
                this.milk_coupon = newVaL*this.lists.product_milk.product_milk_scale;
              }
            },
            computed: {
            },
            methods: {
              changestate:function(type){
                this.exchange_type = type;
              },
              exchange:function(type){
								var exchangenumber;
								switch (type) {
									case 1:
								exchangenumber = this.coins_count;
								break;
								// 	case '2':
								// return exchangenumber = this.renown_count;
								// break;
									case 3:
								exchangenumber = this.milk_count;
								break;
									default:
								}
								if(!(/^[0-9]*[1-9][0-9]*$/.test(exchangenumber))){
									api.alert({
										msg: '请输入正整数',
										buttons: ['确定']
									})
									return false;
								}
								var num = this.coins_count;
								var that = this
                switch (type) {
                  case 1:
										num = this.coins_count;
										if(!(this.coins_count)){
											return
										}
                    break;
                  case 2:
                    num = this.renown_count;
                      break;
                  case 3:
										num = this.milk_count;
										if(!(this.milk_count)){
											return
										}
                      break;
                  default:
                }
                if(num <= 0 || num > 100000){
                  alert("输入数量错误，购买范围为1到100000")
                  return
                }
                var data = {
                    member_id: getPrefs('member_id'),
                    type:type,
                    num:num
                };
                var callback = function (ret) {
                  api.toast({
                    msg : '兑换成功',
                    duration : 3000,
                    location : 'bottom'
									});
									// that.coins_count = 0;
                  // that.renown_count = 0;
                  // that.milk_count = 0;
                  switch (type) {
                    case 1:
                       this.lists.gold.gold=this.lists.gold.gold-num;
                      break;
                    case 2:
                       this.lists.renown.renown=this.lists.renown.renown-num;
                        break;
                    case 3:
                       this.lists.product_milk.product_milk=this.lists.product_milk.product_milk-num;
                        break;
                    default:

                  }
                  api.sendEvent({
                    name : 'updateproperty',
                  });

                  api.closeWin();

                };
                pinet.post(URL.exchangeVoucher, data, callback);
              }
            }
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
